<template>
  <div class="content">
    <a-form ref="formRef" :model="formState" :rules="rules">
      <a-form-item label="考生姓名">
        <a-input
          v-model:value="formState.nickname"
          placeholder="请输入姓名"
          disabled
        />
      </a-form-item>

      <a-form-item label="考生拼音">
        <a-input
          v-model:value="formState.nickname_py"
          placeholder="请输入姓名拼音"
          disabled
        />
      </a-form-item>

      <a-form-item label="性别">
        <!-- <a-input
          :v-model:value="formState.gender == 0 ? '女' : '男'"
          disabled
        /> -->
        <a-select
          v-model:value="formState.gender"
          placeholder="请选择性别"
          disabled
        >
          <a-select-option :value="0">女</a-select-option>
          <a-select-option :value="1">男</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="出生日期">
        <a-date-picker
          v-model:value="formState.birthday"
          type="date"
          format="YYYY-MM-DD"
          placeholder="请选择出生日期"
          style="width: 100%"
          @change="panelChange1"
          disabled
        />
      </a-form-item>

      <a-form-item label="身份证号">
        <a-input
          v-model:value="formState.username"
          placeholder="请输入身份证号"
          disabled
        />
      </a-form-item>

      <a-form-item label="照片（电子版）">
        <a-upload
          v-model:file-list="fileList"
          name="avatar"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          :before-upload="beforeUpload"
          disabled
        >
          <img v-if="imageUrl" height="120" :src="imageUrl" alt="avatar" />
          <div v-else>
            <loading-outlined v-if="loading"></loading-outlined>
            <plus-outlined v-else></plus-outlined>
            <div class="ant-upload-text">点击上传</div>
          </div>
        </a-upload>
      </a-form-item>

      <a-form-item label="联系方式">
        <a-input
          v-model:value="formState.mobile"
          placeholder="请输入联系方式"
          disabled
        />
      </a-form-item>

      <a-form-item label="邮箱地址">
        <a-input
          v-model:value="formState.email"
          placeholder="请输入邮箱地址"
          disabled
        />
      </a-form-item>

      <a-form-item label="户籍">
        <a-input
          v-model:value="formState.huji"
          placeholder="请输入户籍"
          disabled
        />
      </a-form-item>

      <a-form-item label="家庭住址">
        <a-input
          v-model:value="formState.address"
          disabled
          placeholder="请输入家庭住址"
        />
      </a-form-item>

      <a-form-item label="目前就读学校/培训机构">
        <a-input
          v-model:value="formState.school"
          placeholder="请输入目前就读学校/培训机构"
          disabled
        />
      </a-form-item>

      <a-form-item label="证件有效期">
        <a-date-picker
          v-model:value="formState.username_endtime"
          type="date"
          format="YYYY-MM-DD"
          placeholder="请选择证件有效期"
          style="width: 100%"
          @change="panelChange2"
          disabled
        />
      </a-form-item>

      <a-divider class="tishi"
        >请您认真核对信息，如有错误请到个人中心修改</a-divider
      >

      <a-form-item label="考试等级" name="level_id">
        <a-select
          v-model:value="formState.level_id"
          placeholder="请选择考试等级"
        >
          <a-select-option
            v-for="item in levelList"
            :key="item.id"
            :value="String(item.id)"
            >{{ item.name }}</a-select-option
          >
        </a-select>
      </a-form-item>

      <a-form-item label="缴费方式" name="paytype">
        <a-radio-group v-model:value="formState.paytype">
          <a-radio value="0">微信</a-radio>
          <a-radio value="1">支付宝</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="考试时间" name="kaoshi_id">
        <a-select
          v-model:value="formState.kaoshi_id"
          placeholder="请选择考试时间"
        >
          <a-select-option
            v-for="item in kaoshiList"
            :key="item.id"
            :value="String(item.id)"
            >{{ item.name }} --- {{ item.kaoshi_date }}</a-select-option
          >
        </a-select>
      </a-form-item>

      <a-form-item label="证书是否邮寄" name="is_ems">
        <a-radio-group v-model:value="formState.is_ems">
          <a-radio value="0">否（自取）</a-radio>
          <a-radio value="1">是（邮费到付）</a-radio>
        </a-radio-group>
      </a-form-item>

      <div class="fenge">家庭信息</div>

      <a-form-item ref="family_name" label="监护人姓名" name="family_name">
        <a-input
          v-model:value="formState.family_name"
          placeholder="请输入监护人姓名"
        />
      </a-form-item>

      <a-form-item ref="family_tel" label="监护人电话" name="family_tel">
        <a-input
          v-model:value="formState.family_tel"
          placeholder="请输入监护人电话"
        />
      </a-form-item>

      <a-form-item ref="family_address" label="家庭住址" name="family_address">
        <a-input
          v-model:value="formState.family_address"
          placeholder="请输入家庭住址"
        />
      </a-form-item>

      <a-form-item>
        <a-button type="primary" @click="onSubmit" class="button"
          >提 交</a-button
        >
      </a-form-item>
    </a-form>
  </div>
  <a-modal
    title="提示"
    v-model:visible="visible"
    ok-text="确认无误"
    cancel-text="我再想想"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
  >
    <p>请认真核对信息，在确认无误后提交</p>
  </a-modal>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  getCurrentInstance,
} from "vue";
import { message, notification } from "ant-design-vue";
import {
  uploadImg,
  imgUrl,
  getLevel,
  getKaoshi,
  setBaoming,
  getUserInfo,
} from "@/api/https.js";
export default defineComponent({
  setup(props, context) {
    const { proxy } = getCurrentInstance();
    const visible = ref(false);
    const confirmLoading = ref(false);
    const handleOk = async () => {
      confirmLoading.value = true;
      const data = await setBaoming(formState);
      visible.value = false;
      confirmLoading.value = false;
      if (data.code == 1) {
        message.success({
          content: data.msg,
          key: "msg",
        });
        notification.success({
          message: "报名成功",
          description: "请扫二维码完成支付",
        });
        localStorage.setItem("getPayInfo", JSON.stringify(data.data));
        context.emit("navTo", 2);
      } else {
        message.error({
          content: `${data.msg}`,
          key: "msg",
        });
      }
    };
    const formRef = ref();
    const formState = reactive({
      user_id: JSON.parse(localStorage.getItem("info")).id, //用户id
      nickname: "", // 考生姓名
      nickname_py: "", // 考生拼音
      gender: null, // 性别
      birthday: null, // 出生日期
      username: "", // 身份证号
      avatar: "", // 照片（电子版）
      mobile: "", // 联系方式
      email: "", // 邮箱地址
      huji: "", // 户籍
      address: "", // 家庭住址
      school: "", // 目前就读学校/培训机构
      username_endtime: null, //证件有效期
      level_id: "", //报考等级id
      kaoshi_id: "", //考试时间id
      paytype: "", //支付方式 0微信 1支付宝
      is_ems: "", //是否邮寄 0否 1是
      family_name: "", //监护人姓名
      family_tel: "", //监护人电话
      family_address: "", //监护人地址
    });
    // 身份证正则
    let validatePass = async (rule, value) => {
      const zz = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (!zz.test(value)) {
        return Promise.reject("身份证格式填写错误");
      } else {
        return Promise.resolve();
      }
    };
    // 电话正则
    let phoneZZ = async (rule, value) => {
      const zz = /^1[3456789]\d{9}$/;
      if (!zz.test(value)) {
        return Promise.reject("手机号格式错误");
      } else {
        return Promise.resolve();
      }
    };
    // 邮箱正则
    let emailZZ = async (rule, value) => {
      const zz =
        /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/;
      if (!zz.test(value)) {
        return Promise.reject("邮箱格式错误");
      } else {
        return Promise.resolve();
      }
    };
    const rules = {
      nickname: [
        {
          required: true,
          message: "请输入姓名",
          trigger: "blur",
        },
      ],
      nickname_py: [
        {
          required: true,
          message: "请输入姓名",
          trigger: "blur",
        },
      ],
      gender: [
        {
          required: true,
          message: "请选择性别",
          trigger: "change",
        },
      ],
      birthday: [
        {
          required: true,
          message: "请选择出生日期",
          trigger: "change",
        },
      ],
      username: [
        {
          required: true,
          message: "请输入身份证号",
          trigger: "blur",
        },
        {
          validator: validatePass,
          trigger: "blur",
        },
      ],
      avatar: [
        {
          required: true,
          message: "请上传照片",
          trigger: "blur",
        },
      ],
      mobile: [
        {
          required: true,
          message: "请输入联系方式",
          trigger: "blur",
        },
        {
          validator: phoneZZ,
          trigger: "blur",
        },
      ],
      email: [
        {
          required: true,
          message: "请输入邮箱地址",
          trigger: "blur",
        },
        {
          validator: emailZZ,
          trigger: "blur",
        },
      ],
      huji: [
        {
          required: true,
          message: "请输入户籍",
          trigger: "blur",
        },
      ],
      address: [
        {
          required: true,
          message: "请输入家庭住址",
          trigger: "blur",
        },
      ],
      school: [
        {
          required: true,
          message: "请输入目前就读学校/培训机构",
          trigger: "blur",
        },
      ],
      username_endtime: [
        {
          required: true,
          message: "请选择证件有效期",
          trigger: "change",
        },
      ],
      level_id: [
        {
          required: true,
          message: "请选择报考等级",
          trigger: "change",
        },
      ],
      kaoshi_id: [
        {
          required: true,
          message: "请选择报考时间",
          trigger: "change",
        },
      ],
      paytype: [
        {
          required: true,
          message: "请选择支付方式",
          trigger: "change",
        },
      ],
      is_ems: [
        {
          required: true,
          message: "请选择是否邮寄",
          trigger: "change",
        },
      ],
      family_name: [
        {
          required: true,
          message: "请输入监护人姓名",
          trigger: "blur",
        },
      ],
      family_tel: [
        {
          required: true,
          message: "请输入监护人电话",
          trigger: "blur",
        },
        {
          validator: phoneZZ,
          trigger: "blur",
        },
      ],
      family_address: [
        {
          required: true,
          message: "请输入监护人地址",
          trigger: "blur",
        },
      ],
    };

    const modalOpen = ref(false);

    console.log(props);

    const onSubmit = async () => {
      formRef.value
        .validate()
        .then(async () => {
          visible.value = true;
        })
        .catch((error) => {
          console.log("error", error);
        });
    };

    const fileList = ref([]);
    const loading = ref(false);
    const imageUrl = ref("");

    const beforeUpload = async (file) => {
      let param = new FormData();
      param.append("file", file);
      const data = await uploadImg(param);
      formState.avatar = data.data.url;
      imageUrl.value = imgUrl + data.data.url;
      message.info(`${data.msg}`);
      console.log("图片上传---", data);
    };

    const panelChange1 = (val, mode) => {
      formState.birthday = mode;
    };

    const panelChange2 = (val, mode) => {
      formState.username_endtime = mode;
      console.log(formState.username_endtime);
    };

    const levelList = ref([]);
    const kaoshiList = ref([]);

    const getInfo = async () => {
      const info = await getUserInfo({ user_id: formState.user_id });
      info.data.username_endtime = getTime(info.data.username_endtime);
      info.data.birthday = getTime(info.data.birthday);
      imageUrl.value = imgUrl + info.data.avatar;
      Object.keys(info.data).map((item) => {
        formState[item] = info.data[item];
      });
      console.log("info---", formState);
      const level = await getLevel();
      levelList.value = level.data;
      const kaoshi = await getKaoshi();
      kaoshi.data.forEach(
        (item) => (item.kaoshi_date = proxy.$getTime(item.kaoshi_date))
      );
      kaoshiList.value = kaoshi.data;
    };

    const getTime = (time) => {
      const endTime = new Date(time * 1000);
      const endFullYear = endTime.getFullYear();
      const endMonth =
        endTime.getMonth() + 1 >= 10
          ? endTime.getMonth() + 1
          : "0" + (endTime.getMonth() + 1);
      const endDate =
        endTime.getDate() >= 10 ? endTime.getDate() : "0" + endTime.getDate();
      console.log(`${endFullYear}-${endMonth}-${endDate}`);
      return `${endFullYear}-${endMonth}-${endDate}`;
    };

    onMounted(() => {
      getInfo();
    });

    return {
      formRef,
      other: "",
      formState,
      rules,
      onSubmit,
      fileList,
      beforeUpload,
      imageUrl,
      loading,
      panelChange1,
      panelChange2,
      modalOpen,
      levelList,
      kaoshiList,
      visible,
      confirmLoading,
      handleOk,
    };
  },
});
</script>

<style lang="less" scoped>
.content {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  //   max-width: 500px;
  margin-top: 40px;

  .ant-form-item {
    flex-direction: var(--bannerFlex);
    justify-content: center;
  }

  .tishi {
    text-align: center;
    color: rgb(233, 42, 42);
    font-size: 0.7rem;
    margin: 40px 0;
  }

  .button {
    margin-top: 20px;
    width: 100%;
    height: 45px;
    background: #554de6;
    border-radius: 25px;
    font-size: var(--txtSize);
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
  }

  .buttons {
    text-align: center;
    font-size: var(--txtSize);
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #808080;
    cursor: pointer;
  }

  .fenge {
    width: 100%;
    border-top: 1px solid #e6e6e6;
    padding-top: 40px;
    margin-top: 100px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 1.37rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  /deep/ .ant-col {
    width: 300px;
  }
  /deep/ .ant-form-item-label {
    width: 160px;
    margin-right: 20px;
  }
}
/deep/ .ant-modal-confirm-btns {
  display: none;
}
/deep/ .ant-input[disabled] {
  color: #000;
  background-color: transparent;
  border: none;
  // border-bottom: 1px solid #d9d9d9;
}
/deep/
  .ant-select-disabled.ant-select-single:not(.ant-select-customize-input)
  .ant-select-selector {
  color: #000;
  background-color: transparent;
  border: none;
  // border-bottom: 1px solid #d9d9d9;
}
</style>
